<template>
  <view class="container">
    <view class="certificate-info">
      <!-- 遍历 labels 显示对应的证书信息 -->
      <view class="info-row" v-for="(label, key) in labels" :key="key">
        <text class="label">{{ label }}</text>
        <text class="value">
          {{
            key === "platecolor"
              ? getPlateColorLabel(certificateInfo[key])
              : certificateInfo[key]
          }}
        </text>
      </view>
    </view>

    <view class="btn-container">
      <u-button @click="closePage">关闭</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      certificateInfo: {}, // 存储证书信息
      labels: {
        vehiclenum: "车牌号码",
        platecolor: "车牌颜色",
        inspector: "审验人",
        state: "审核状态",
        checkdate: "审核日期",
        inspectyear: "审核年度",
        insurancecompany: "保险公司",
        insurancerecorder: "承运人责任险保单号",
        insurancestartdate: "保险有效期起",
        insuranceenddate: "保险有效期止",
        deptopinion: "处理意见",
      },
      applyid: null, // 存储申请ID
      plateColorMap: {
        1: "蓝色",
        2: "黄色",
        3: "黑色",
        4: "白色",
        5: "绿色",
        9: "其他",
      }, // 车牌颜色映射
    };
  },
  onLoad(options) {
    this.applyid = options.applyid; // 获取传递的申请ID
    console.log("Received applyid:", this.applyid);
    this.fetchDataByApplyId(this.applyid); // 根据申请ID获取数据
  },
  methods: {
    fetchDataByApplyId(applyid) {
      const vehicleList = uni.getStorageSync("vehicleList"); // 从本地存储获取车辆列表
      console.log("vehicleList", vehicleList);

      // 查找与申请ID匹配的车辆信息
      const vehicle = vehicleList.find((item) => item.applyid === applyid);
      if (vehicle) {
        this.certificateInfo = vehicle; // 更新证书信息
      } else {
        console.error("未找到对应的车辆信息");
      }
    },
    getPlateColorLabel(code) {
      return this.plateColorMap[code] || "未知颜色"; // 返回颜色名称
    },
    closePage() {
      uni.navigateBack(); // 返回到上一个页面
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  background-color: #f3f6fa;
  padding: 0;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  position: relative; /* 确保子元素绝对定位 */
}

.certificate-info {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .info-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 600px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eaeaea;
    .label {
      color: #79829c;
      font-size: 14px;
      line-height: 1.2;
    }

    .value {
      color: #0d1444;
      font-size: 14px;
    }
  }
}
.btn-container {
  padding: 0 10px;
  margin-top: 30px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  ::v-deep .u-button--info[data-v-461e713c] {
    width: 100%;
    background-color: #2877ff;
    color: #ffffff;
  }
}
</style>
